{{ if .Site.Params.experience.enable | default false }}
<section id="experience" class="py-5">
    <div class="container">
        <h3 class="text-center">{{ .Site.Params.experience.title | default "Experience" }}</h3>
        <div class="row justify-content-center">
            <div class="col-sm-12 col-md-8 col-lg-8 py-5">
                <div class="experience-container px-3 pt-2">
                    <ul class="nav nav-pills mb-2 bg-transparent primary-font" id="pills-tab" role="tablist">
                        {{ range $index, $element := .Site.Params.experience.items }}
                            {{ $firstJobDate := "" }}
                            {{ if .jobs }}
                                {{ $firstJobDate = (index .jobs 0).date }}
                            {{ end }}
                            <li class="nav-item px-1 bg-transparent" role="presentation">
                                <div
                                    class="nav-link {{ if (eq $index 0) }}active{{ end }} bg-transparent"
                                    aria-selected="true"
                                    role="tab"
                                    data-bs-toggle="pill"
                                    id='{{ replaceRE "-+" "-" (replaceRE "[^a-zA-Z0-9]" "-" (print .company "-" $firstJobDate)) | lower }}-tab'
                                    data-bs-target='#pills-{{ replaceRE "-+" "-" (replaceRE "[^a-zA-Z0-9]" "-" (print .company "-" $firstJobDate)) | lower }}'
                                    aria-controls='{{ replaceRE "-+" "-" (replaceRE "[^a-zA-Z0-9]" "-" (print .company "-" $firstJobDate)) | lower }}'
                                >
                                    {{ .company }}
                                </div>
                            </li>
                        {{ end }}
                    </ul>

                    <div class="tab-content pb-3 bg-transparent primary-font" id="pills-tabContent">
                        {{ range $index, $element := .Site.Params.experience.items }}
                            {{ $company := .company }}
                            {{ $companyUrl := .companyUrl }}
                            {{ $firstJobDate := "" }}
                            {{ if .jobs }}
                                {{ $firstJobDate = (index .jobs 0).date }}
                            {{ end }}
                            <div
                                class="tab-pane fade bg-transparent {{ if eq $index 0 }}show active{{ end }}"
                                role="tabpanel"
                                id='pills-{{ replaceRE "-+" "-" (replaceRE "[^a-zA-Z0-9]" "-" (print .company "-" $firstJobDate)) | lower }}'
                                aria-labelledby='{{ replaceRE "-+" "-" (replaceRE "[^a-zA-Z0-9]" "-" (print .company "-" $firstJobDate)) | lower }}-tab'
                            >
                                {{ range $jobIdx, $job := .jobs }}
                                    <div>
                                        <div class="d-flex align-items-center justify-content-between">
                                            <div>
                                                <span class="{{ if eq $jobIdx 0 }}h4{{ else }}h5{{ end }}">{{ $job.name }}</span>
                                                
                                                {{ if $job.info.content }}
                                                    <span class="p-2">
                                                        <span 
                                                            style="cursor: pointer;" 
                                                            data-bs-toggle="tooltip" 
                                                            data-bs-placement="top" 
                                                            data-bs-original-title={{$job.info.content}}
                                                        > 
                                                            <i class="fas fa-info-circle fa-xs"></i>
                                                        </span>
                                                    </span>
                                                {{ end }}
                                                
                                                {{ if eq $jobIdx 0 }}
                                                    <small>-</small>
                                                    <a href="{{ $companyUrl }}" target="_blank">{{ $company }}</a>
                                                {{ end }}
                                            </div>
                                            <div class="d-block">
                                                <small>{{ $job.date }}</small>
                                                {{ if $job.featuredItems }}
                                                    <div class="featuredLink list-inline d-flex justify-content-end align-items-center">
                                                        {{ range $job.featuredItems.fontAwesomeIcons }}
                                                            <div class="list-inline-item">
                                                                <a
                                                                    href="{{ .url }}"
                                                                    target="_blank"
                                                                    {{ if .tooltip}}
                                                                        data-bs-toggle="tooltip" 
                                                                        data-bs-placement="top" 
                                                                        data-bs-original-title={{.tooltip}}
                                                                    {{ end }}
                                                                >
                                                                    <i class="{{ .icon }}"></i>
                                                                </a>
                                                            </div>
                                                        {{ end }}
                                                        {{ range $job.featuredItems.customIcons }}
                                                            <div class="list-inline-item">
                                                                <a
                                                                    class="d-flex align-items-center justify-content-between" 
                                                                    href="{{ .url }}" 
                                                                    target="_blank"

                                                                    {{ if .tooltip}}
                                                                        data-bs-toggle="tooltip" 
                                                                        data-bs-placement="top" 
                                                                        data-bs-original-title={{.tooltip}}
                                                                    {{ end }}
                                                                >
                                                                    <img src="{{ .icon }}">
                                                                </a>
                                                            </div>
                                                        {{ end }}
                                                    </div>
                                                {{ end }}
                                            </div>
                                        </div>
                                        <div class="pb-2 pb-3">
                                            {{ $job.content | markdownify}}
                                        </div>
                                    </div>
                                {{ end }}
                            </div>
                        
                        {{ end }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{{ end }}
